<script setup>
function to(params) {
    switch (params) {
        case 0:
            window.location.href = "/";
            break;
        case 1:
            window.location.href = "/joblist";
            break;
        case 2:
            window.location.href = "/visul";
            break;
        case 3:
            window.location.href = "/about";
            break;
    }
}
</script>

<template>
    <div class="nav">
        <div class="container">
            <div class="title">基于python的招聘数据可视化平台</div>
            <div class="menu">
                <div class="menu_i" @click="to(0)">首页</div>
                <div class="menu_i" @click="to(1)">岗位数据</div>
                <div class="menu_i" @click="to(2)">数据可视化</div>
                <div class="menu_i" @click="to(3)">个人中心</div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .nav{
        width: 100%;
        height: 100px;
        background-color: #70b6fe;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        color: #111e51;
    }
    .title{
        width: 50%;
        font-size: 24px;
        font-weight: 600;
        margin-left: 20px;
    }
    .menu{
        width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
    }
    .menu_i{
        width: 100px;
        text-align: center;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .menu_i:hover{
        background-color: #5b82ef;
        color: white;
        cursor: pointer;
    }
</style>
